<template>
  <el-card shadow="always" :body-style="{ padding: '20px' }">
    <template #header>
      <el-button
        type="primary"
        icon="ele-Plus"
        @click="emit('changeShowIndex', 2)"
        :disabled="!category3Id"
        >新增SPU</el-button
      >
    </template>
    <!-- card body -->
    <el-table :data="spuList" border stripe>
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column label="SPU名称" prop="spuName"></el-table-column>
      <el-table-column label="SPU描述" prop="description"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="small"
            icon="ele-Plus"
            @click="emit('changeShowIndex', 3, row)"
          ></el-button>
          <el-button
            type="warning"
            size="small"
            icon="ele-Edit"
            @click="emit('changeShowIndex', 2, row)"
          ></el-button>
          <el-button
            type="info"
            size="small"
            icon="ele-Warning"
            @click="showSkuInfo(row.id)"
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="ele-Delete"
            @click="deleteSpu(row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 7, 9]"
      layout="prev, pager, next,sizes,total"
      :total="total"
      :style="{ marginTop: '20px' }"
    />

    <el-dialog width="50%" v-model="dialogTableVisible" title="SKU 列表">
      <el-table :data="skuList">
        <el-table-column label="名称" prop="skuName" />
        <el-table-column label="价格" prop="price" />
        <el-table-column label="重量" prop="weight" />
        <el-table-column label="默认图片">
          <template v-slot="{ row }">
            <img :src="row.skuDefaultImg" width="100" alt="" />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { ElMessage } from "element-plus";

export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { reqSpuList, type spuInfoItemType, reqDeleteSpu } from "@/api/spu";
import type { spuInfoListType } from "@/api/spu";
import { reqSkuListBySpuId } from "@/api/sku";
import type { skuInfoListType } from "@/api/sku";
import useCategoryStore from "@/stores/category";

//得到categorystore对象
const categoryStore = useCategoryStore();

//得到category中的category3Id
const { category3Id } = storeToRefs(categoryStore);

//页码的数据
const currentPage = ref(1); //当前页
const pageSize = ref(3); //每页条数
const total = ref(0); //总数量

//列表数据
const spuList = ref<spuInfoListType>([]);

//封装一个发送初始化分页列表请求的函数
const getSpuList = async () => {
  const result = await reqSpuList(
    currentPage.value,
    pageSize.value,
    category3Id.value as number
  );
  spuList.value = result.records;
  total.value = result.total;
  // console.log(spuList.value);
};

//初始化发送请求
onMounted(() => {
  if (category3Id.value) {
    getSpuList();
  }
});

//监听category3Id的改变才能发送初始化列表数据
watch(category3Id, (newVal) => {
  //r如果category3Id的值为空,则要先清空数据
  if (!newVal) {
    spuList.value = [];
    return;
  }

  //请求新的分页列表
  getSpuList();
});

//使用watch监听页码的改变,重新发送请求
watch([currentPage, pageSize], getSpuList);

//接收切换组件的自定义事件
const emit = defineEmits<{
  (event: "changeShowIndex", index: number, row?: spuInfoItemType): void;
}>();

//定义一个数据 代表当前是否展示skuInfo的弹窗
const dialogTableVisible = ref(false);

//定义一个初始化数据，保存请求回来的sku列表
const skuList = ref<skuInfoListType>([]);

//点击查看某个spu的sku列表的事件回调函数
const showSkuInfo = async (spuId: number) => {
  dialogTableVisible.value = true;

  //发送请求
  const result = await reqSkuListBySpuId(spuId);
  skuList.value = result;
};

//删除某个spu
const deleteSpu = async (spuId: number) => {
  await reqDeleteSpu(spuId);

  ElMessage.success("删除spu成功");

  //重新发送列表请求
  //请求新的分页列表
  getSpuList(); 
};
</script>

<style scoped lang="scss"></style>
